<template>
  <el-card>
    <div class="head-container">
      <el-input
        v-model="searchText"
        placeholder="请输入关键字搜索"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>

    <div class="head-container">
      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        default-expand-all
        ref="tree"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
        @check="handleCheck"
        :render-content="renderContent"
      />
    </div>
  </el-card>
</template>

<script>
import { getRiverTree } from "@/api/waterBusiness/interface.js";
export default {
  name: "TreeSelect",
  data() {
    return {
      searchText: "",
      seltype: "river",
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },

      targetNodeId: null, // 存储要特殊处理的节点ID
    };
  },
  watch: {
    searchText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getRiverTree();
  },
  methods: {
    // 节点过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 将扁平数据转换为树形结构
    convertToTree(data) {
      // 创建id到节点的映射表
      const nodeMap = {};

      // 初始化所有节点，保留原有id，添加label和children
      data.forEach((node) => {
        nodeMap[node.id] = {
          ...node, // 保留所有原始字段（包括id）
          label: node.name, // 添加label字段，值为name
          children: [], // 初始化子节点数组
        };
      });

      // 构建树形结构
      const tree = [];
      data.forEach((node) => {
        const currentNode = nodeMap[node.id];
        const parentNode = nodeMap[node.pId];

        if (parentNode) {
          // 存在父节点，添加到父节点的children中
          parentNode.children.push(currentNode);
        } else {
          // 根节点（pId为0）直接加入树
          tree.push(currentNode);
        }
      });

      return tree;
    },
    //河流
    getRiverTree() {
      getRiverTree().then((res) => {
        if (res.code === 200) {
          this.deptOptions = this.convertToTree(res.data || []);
          // console.log(">>> this.deptOptions", this.deptOptions);

          // 1. 找到目标节点（第一级节点的最深层第一个子节点）
          // this.targetNodeId = this.findDeepestFirstNode(this.deptOptions);
          // 设置默认第一个
          this.targetNodeId = this.deptOptions[0].id;
          // console.log(">>>默认的节点是撒", this.targetNodeId);
          this.$emit("treeNodeClickk", this.targetNodeId);
        }
      });
    },

    // 点击节点时触发
    handleNodeClick(data, node) {
      // console.log("点击的节点数据：", data);
      // console.log("节点实例：", node);
      // 判断当前节点是否为最深层子节点（没有children或children为空）
      // const isDeepestNode = !node.childNodes || node.childNodes.length === 0;
      const isDeepestNode = node;
      if (isDeepestNode) {
        // 更新目标节点ID，触发重新渲染
        this.targetNodeId = data.id;
        console.log(">>>this.targetNodeId", this.targetNodeId);
        this.$emit("treeNodeClickk", this.targetNodeId);
      }
    },

    // 节点勾选状态变化时触发
    handleCheckChange(data, checked, indeterminate) {
      // console.log("节点数据：", data);
      // console.log("是否勾选：", checked);
      // console.log("是否半选：", indeterminate);
    },

    // 节点勾选事件（包含全选/半选状态）
    handleCheck(selection, checkedKeys) {
      // console.log("当前选中的节点数组：", selection);
      // console.log("当前选中的节点ID数组：", checkedKeys);
      // this.selectedNodes = selection; // 保存选中的节点
      const ids = checkedKeys.checkedNodes.map((node) => node.id).join(",");
      this.$emit("node-click", ids);
    },

    // 查找下id
    /**
     * 递归查找每个根节点的最深层第一个子节点
     * @param {Array} nodes 当前层级的节点数组
     * @returns {string|null} 最深层节点ID
     */
    findDeepestFirstNode(nodes) {
      let deepestNode = null;
      let maxDepth = 0;

      // 递归遍历函数
      const traverse = (node, depth) => {
        if (node.children && node.children.length > 0) {
          // 有子节点则继续深入
          const child = node.children[0]; // 取第一个子节点
          traverse(child, depth + 1);
        } else {
          // 无子节点，记录最深节点
          if (depth > maxDepth) {
            maxDepth = depth;
            deepestNode = node.id;
          }
        }
      };

      // 遍历所有根节点
      nodes.forEach((rootNode) => {
        traverse(rootNode, 1); // 根节点深度记为1
      });

      this.targetNodeId = deepestNode;
      return deepestNode;
    },

    /**
     * 获取目标节点的所有父节点ID（用于自动展开）
     * @param {Array} nodes 当前层级节点
     * @param {string} targetId 目标节点ID
     * @param {Array} parentIds 父节点ID缓存
     * @returns {Array} 父节点ID数组
     */
    getParentIds(nodes, targetId, parentIds = []) {
      for (const node of nodes) {
        if (node.id === targetId) {
          return parentIds;
        }
        if (node.children && node.children.length > 0) {
          const newParentIds = [...parentIds, node.id];
          const result = this.getParentIds(
            node.children,
            targetId,
            newParentIds
          );
          if (result.length > 0) {
            return result;
          }
        }
      }
      return [];
    },
    renderContent(createElement, { node, data }) {
      // 定义样式：目标节点字体为蓝色，其他节点默认
      const style =
        data.id === this.targetNodeId
          ? { color: "#307eff", fontWeight: "bold" } // 可额外增加加粗等样式
          : {};

      // 使用 createElement 方法创建虚拟DOM（Vue2语法）
      return createElement(
        "span", // 标签名
        { style: style }, // 标签属性（样式）
        node.label // 标签内容
      );
    },
  },
};
</script>

<style></style>
